<template>
    <!-- 
        监听鼠标移动的实时位置 方法1 (无渲染组件)
        因为组件没有一丢丢自己的模版内容，完全是由父组件控制，所以这样的组件称为‘无渲染组件’ 
        缺点：增加了组件，也就是增加了额外组件嵌套的开销.
    -->
    <ZhuHe v-slot="{ x, y }">
        <h2>插槽无渲染组件--鼠标移动的位置数据:{{ x }} && {{ y }}</h2>
    </ZhuHe>
    <!-- 
        监听鼠标移动的实时位置 方法2  (推荐: 组合式函数)
        组合式函数: 函数封装公共任务的逻辑,接收一些输入后立刻返回所期望的输出 .
        优点：改善代码结构 ; 因为是抽离的JS 文件,不会产生额外组件嵌套的开销 ;
    -->
    <h3>组合式函数得到的数据: {{ x }} ### {{ y }}</h3>
    <el-button type="danger" @click="btnck">动态化传入参数值</el-button>
    <h3>组合式函数,动态化传入参数值,得到的数据: {{ getObj.data }} ### {{ getObj.error }}--点击按钮时应该再次调用方法传入新的参数,官网中的监听，无法达到想要的效果</h3>
</template>
<script setup>
import { reactive, ref } from 'vue';
import ZhuHe from './组合式函数/ZhuHe.vue';
import { useMyFun , useFetch} from './组合式函数/com.js'

const { x, y } = useMyFun()

const url = ref('...')
let getObj = reactive({})
getObj = useFetch(url.value)
function btnck() {
    url.value = 'btnckkk'
    getObj = useFetch(url.value)
}

</script>
<style lang='scss' scoped></style>